import React from 'react';
import { Steps } from 'antd';
import moment from 'moment';
import cn from 'classnames';
import styles from './index.less';

const { Step } = Steps;

const DetailSteps = ({ dataSource = [], onClick }) => {
    const renderOperateContent = item => {
        const { description, date } = item;
        const renderBtn = () => (
            <a className={styles.btn} onClick={() => onClick(item)}>
                详情
            </a>
        );

        return (
            <div className={styles.content}>
                <div className={styles.box}>
                    <div className={cn(styles.time, styles.lighter)}>
                        {date ? moment(date).format('YYYY-MM-DD HH:mm') : ''}
                    </div>
                    {renderBtn()}
                </div>

                <div>{description}</div>
            </div>
        );
    };

    return (
        <div className={styles.operateWrapper}>
            <Steps progressDot current={dataSource?.length || 999} size="small" direction="vertical">
                {dataSource.map(item => (
                    <Step status="process" key={item.id} title={renderOperateContent(item)}></Step>
                ))}
            </Steps>
        </div>
    );
};

export default DetailSteps;
